/**
 * Created by duke on 2020/9/16.
 */
import React from 'react';
import { PureComponent } from "react";
import { Layout, Row, Col, Menu, Select, Button, Carousel } from 'antd';
import { Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import homebackground from './about.png';
import AboutLeft from './aboutLeft.png';
import Pattern from './Pattern.png';
import Company from './CompanyHistory.png';
import History from './history1.png';
import History1 from './history1.jpg';
import ChatUs from './chatUs.png';
import Partner from './partner.png';

import ActionButton from '_antd@4.16.13@antd/lib/modal/ActionButton';
const { Header, Footer, Sider, Content } = Layout;
const { SubMenu } = Menu;
const { Option } = Select;

const homeImage = {
    backgroundSize: '100% 60px',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center 29px',
    backgroundImage: 'url(' + homebackground + ')',
    height: '105px',
    width: '500px',
    margin: '0px auto 0px',
    textAlign: 'center',
    fontSize: '32px',
    fontWeight: 'bold',
    color: '#151515',

}

const aboutLeft = {
    height: '840px',
  
    backgroundSize: '842px 840px',
    backgroundRepeat: 'no-repeat',
    backgroundImage: 'url(' + AboutLeft + ')',
    marginTop: '76px',
    width:'44%'
}
const pattern = {
    backgroundSize: '224px 224px',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '99% 70px,80% 416px',
    backgroundImage: `url(${Pattern}),url(${Pattern})`,
    height: '336px',
    backgroundColor: '#367BF0',
    height: '640px',
    width: '71%',
    position: 'absolute',
    top: '100px',
    left: '29%',

}
const company = {
    backgroundSize: '100% 60px',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'center 29px',
    backgroundImage: 'url(' + Company + ')',
    height: '89px',
    width: '946px',
    margin: '0px auto 0px',
    textAlign: 'center',
    fontSize: '32px',
    fontWeight: 'bold',
    color: '#151515'
}
const history = {
    backgroundSize: '1200px 604px',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '0px 0px',
    backgroundImage: 'url(' + History + ')',
    height: '604px',
    width: '1200px',
    margin:'0 auto',
    marginTop: '68px',
    position: 'relative'
}
const chatUs = {
    backgroundSize: '100% 856px',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '0px 0px',
    backgroundImage: 'url(' + ChatUs + ')',
    height: '856px',
    width: '100%',
    marginTop: '104px',
}
const partner = {
    backgroundSize: '100% 180px',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '0px 0px',
    backgroundImage: 'url(' + Partner + ')',
    height: '180px',
    width: '100%',
    marginTop: '0px',
}

export default class Chat extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            path: localStorage.getItem("path"),
            current: '5',
            IsFooter1: false,
            IsFooter2: false,
            IsFooter3: false,
            IsFooter4: false,
        }
    };
    componentWillMount() {

    };
    componentDidMount() {

    };
    footer1Over = () => {
        this.setState({
            IsFooter1: true
        })
    }
    footer1Out = () => {
        this.setState({
            IsFooter1: false
        })
    }
    footer2Over = () => {
        this.setState({
            IsFooter2: true
        })
    }
    footer2Out = () => {
        this.setState({
            IsFooter2: false
        })
    }
    footer3Over = () => {
        this.setState({
            IsFooter3: true
        })
    }
    footer3Out = () => {
        this.setState({
            IsFooter3: false
        })
    }
    footer4Over = () => {
        this.setState({
            IsFooter4: true
        })
    }
    footer4Out = () => {
        this.setState({
            IsFooter4: false
        })
    }
    uposClick = () => {

        window.location.href = "/upos/";


    }
    questionClick = () => {
        window.location.href = "/question/";
    }
    chatClick = () => {
        window.location.href = "/chat/";
    }
    backTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
    }
    render() {
        let { path, current, IsFooter1, IsFooter2, IsFooter3, IsFooter4, } = this.state;
        return (
            <Layout style={{ background: '#fff', minWidth: '1500px', overflow: 'auto', }}>
                <Header style={{ width: '100%', }}>
                    <Row>
                        <Col span={4}></Col>
                        <Col span={16}>
                            <Row style={{ width: '100%' }}>
                                <Col span={4}>
                                    <img src={path + "images/header.png"} style={{ width: '143px', height: '26px' }} />
                                </Col>
                                <Col span={9}></Col>
                                <Col span={11} style={{ position: 'relative' }}>
                                    <img src={path + "images/arrowDown.png"} style={{ width: '24px', position: 'absolute', top: '19px', left: '140px' }}></img>
                                    <Menu mode="horizontal" selectedKeys={[current]}>
                                        <Menu.Item key="0">
                                            <Link to="/" style={{ color: '#2B292D' }}>首页</Link>
                                        </Menu.Item>
                                        <SubMenu key="sub1" title="产品中心">
                                            <Menu.Item key="1">

                                                <Link to="/upos/"> 进销存管理系统</Link>
                                            </Menu.Item>
                                            <Menu.Item key="2">
                                                <Link to="/pos/">收银系统</Link>
                                            </Menu.Item>
                                            <Menu.Item key="3">
                                                <Link to="/posApp/">在线商城APP</Link>
                                            </Menu.Item>

                                        </SubMenu>
                                        <Menu.Item key="4">
                                            <Link to="/question/">解决方案</Link>
                                        </Menu.Item>
                                        <Menu.Item key="5">
                                            <Link to="/chat/">关于我们</Link>
                                        </Menu.Item>

                                    </Menu>

                                </Col>

                            </Row>
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                </Header>
                <Content>
                     <div style={{width:'1200px',margin:"72px auto 0px",overflow:'hidden'}}>
                        <div style={homeImage}>关于我们</div>
                    </div>
                    <div style={{ width: '100%', position: 'relative',}}>
                        <div style={aboutLeft}>
                        </div>
                        <div style={pattern}>
                            <div style={{ width: '683px', margin: '100px 0px 0px', paddingLeft: '136px' }}>
                                <p style={{ fontSize: '32px', color: '#fff', marginBottom: '80px' }}>公司简介</p>
                                <p style={{ fontSize: '18px', color: '#fff', marginBottom: '0px' }}>杭州青湘科技有限公司成立于2017年，是一家专注为中小型零售超市提供产品与服务</p>
                                <p style={{ fontSize: '18px', color: '#fff' }}>的科技型公司。</p>
                                <p style={{ fontSize: '18px', color: '#fff', marginBottom: '0px' }}>以先进的技术、架构、理念为基础，以围绕零售业务场景和客户体验为中心，相继开</p>
                                <p style={{ fontSize: '18px', color: '#fff' }}>发了进销存管理系统、收银系统、在线商城APP、员工/老板移动端 等产品。</p>
                                <p style={{ fontSize: '18px', color: '#fff' }}>自UPOS系列产品在2018年投入到意大利以来，获得零售行业内的广泛认可。</p>
                                <div style={{ width: '18px', height: '3px', background: '#fff', marginTop: '96px' }}></div>
                            </div>


                        </div>
                   </div>
                    
                    <div style={{ width: '1200px', margin: "104px auto", overflow: 'hidden' }}>
                        <div style={company}>
                            公司大事记
                        </div>
                    </div>
                      
                        <div style={history}>
                            <div style={{ position: 'absolute', top: '138px', left: '87px' }}>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>UPOS项目正式启动，第</p>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>一版进销存产品上线发布</p>
                                <p style={{ color: '#151515', fontSize: '18px', margin: '24px 0 0 0', fontWeight: 'bold', textAlign: 'center' }}>2017年</p>
                            </div>
                            <div style={{ position: 'absolute', top: '138px', left: '518px' }}>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>第二代进销存产品上线发</p>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}> 布，成功部署第29家门店</p>
                                <p style={{ color: '#151515', fontSize: '18px', margin: '24px 0 0 0', fontWeight: 'bold', textAlign: 'center' }}>2019年</p>
                            </div>
                            <div style={{ position: 'absolute', right: '64px', top: '138px' }}>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>UPOS产品迭代到第三代，</p>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>入评浙江省科技创新企业</p>
                                <p style={{ color: '#151515', fontSize: '18px', margin: '24px 0 0 0', fontWeight: 'bold', textAlign: 'center' }}>2021年</p>
                            </div>
                            <div style={{ position: 'absolute', bottom: '135px', left: '306px' }}>
                                <p style={{ color: '#151515', fontSize: '18px', margin: '0 0 24px 0', fontWeight: 'bold', textAlign: 'center' }}>2018年</p>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>红苹果、绿苹果Nuovo</p>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>  及Rovigo门店投入使用</p>

                            </div>
                            <div style={{ position: 'absolute', bottom: '116px', right: '293px' }}>
                                <p style={{ color: '#151515', fontSize: '18px', margin: '0 0 24px 0', fontWeight: 'bold', textAlign: 'center' }}>2020年</p>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>发布在线商城APP，支持</p>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>意大利线下门店在疫情期</p>
                                <p style={{ color: '#4E5155', fontSize: '16px', margin: '0px' }}>开展线上业务</p>

                            </div>
                        </div>
                      
                      
                   
                 
                    <div style={chatUs}></div>
                    <div style={partner}></div>
                </Content>
                <Footer style={{ background: '#001123', padding: '81px 0 0 0px', }}>
                    <div style={{ overflow: 'hidden', width: '1200px', margin: '0 auto' }}>
                        <div style={{ float: 'left' }}>
                            <img src={path + "images/logoUpos.png"} style={{ width: '143px', height: '26px' }} />
                        </div>
                        <div style={{ float: 'left', borderRight: '1px solid rgb(42,42,42)', padding: '0 90px 0px 196px', width: '588px' }}>
                            <a style={{ color: '#fff', fontSize: '16px', marginRight: '168px', }} className='aHover' >
                                <Link to="/upos/" style={{ color: '#fff', }} onClick={this.backTop}> 产品中心</Link>


                            </a>
                            <a style={{ color: '#fff', fontSize: '16px', }} className='aHover' >
                                <Link to="/question/" style={{ color: '#fff', }} onClick={this.backTop}>  解决方案</Link>


                            </a>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '22px' }}>进销存管理系统</p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '12px' }}>收银系统</p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '12px' }}>在线商品APP</p>
                            <p style={{ marginTop: '92px', }}>
                                <a style={{ color: '#fff', fontSize: '16px', }} href="/chat/" className='aHover' >
                                    <Link to="/chat/" style={{ color: '#fff', }} onClick={this.backTop}>    关于我们</Link>


                                </a>
                            </p>
                            <p style={{ color: '#999999', fontSize: '14px', marginTop: '22px' }}>杭州青湘科技有限公司</p>
                            <div style={{ margin: '15px 0 0px 0', color: '#999999', fontSize: '14px', }}>
                                <span style={{ height: '16px', paddingRight: '20px', borderRight: '1px solid #999999', }}>杭州</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>上海</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>北京</span>
                                <span style={{ height: '16px', padding: '0px 16px 0px 16px', borderRight: '1px solid #999999', }}>深圳</span>
                                <span style={{ height: '16px', paddingLeft: '20px', }}>威尼斯</span>
                            </div>
                        </div>
                        <div style={{ float: 'left', paddingLeft: '86px', color: '#999999', }}>
                            <p style={{ fontSize: '16px' }}>中国联系方式：</p>
                            <div>
                                <img src={path + "images/weChat.png"} style={{ width: '24px', height: '24px' }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>企业微信</span>

                            </div>
                            <div style={{ marginTop: '8px' }}>
                                <img src={path + "images/erweima.png"} style={{ width: '104px' }}></img>

                            </div>
                            <p style={{ fontSize: '16px', marginTop: '48px' }}>意大利销售专员：</p>
                            <div>
                                <img src={path + "images/phone.png"} style={{ width: '24px', height: '24px' }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>韩先生手机</span>
                            </div>
                            <p style={{ fontSize: '14px', marginTop: '12px', color: '#fff' }}>+39/3778832691</p>
                        </div>
                        <div style={{ float: 'left', marginLeft: '117px', color: '#999', fontSize: '14px', paddingTop: '42px' }}>
                            <div>
                                <img src={path + "images/email.png"} style={{ width: '24px', height: '24px', }}></img>
                                <span style={{ fontSize: '14px', marginLeft: '8px' }}>Email</span>
                                <p style={{ color: '#fff', fontSize: '14px', marginTop: '8px' }}>support@imichi.cn</p>
                                <div style={{ marginTop: '172px' }}>
                                    <img src={path + "images/email.png"} style={{ width: '24px', height: '24px' }}></img>
                                    <span style={{ fontSize: '14px', marginLeft: '8px' }}>Email</span>
                                </div>
                                <p style={{ fontSize: '14px', marginTop: '12px', color: '#fff' }}>upositalia@gmail.com</p>
                            </div>
                        </div>
                    </div>
                    <div style={{ borderTop: '1px solid rgb(42,42,42)', marginTop: "79px", fontSize: '14px', color: '#999', textAlign: 'center', padding: '20px 0 22px' }}>版权所有 @杭州青湘科技有限公司</div>

                </Footer>

            </Layout>
        );
    }

}


